// 设置视图组件
import React, { useState } from 'react';
import { useSettings } from '../hooks/useSettings';

interface SettingsViewProps {
  className?: string;
}

interface SettingsSection {
  id: string;
  title: string;
  icon: string;
}

const SETTINGS_SECTIONS: SettingsSection[] = [
  { id: 'general', title: '通用设置', icon: '⚙️' },
  { id: 'editor', title: '编辑器', icon: '📝' },
  { id: 'appearance', title: '外观', icon: '🎨' },
  { id: 'performance', title: '性能', icon: '⚡' },
  { id: 'advanced', title: '高级', icon: '🔧' },
];

export const SettingsView: React.FC<SettingsViewProps> = ({ className }) => {
  const [activeSection, setActiveSection] = useState('general');
  const { getSetting, updateSetting } = useSettings();

  const renderGeneralSettings = () => (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
          通用设置
        </h3>
        
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                自动保存
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                自动保存文件更改
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('autoSave', true)}
              onChange={(e) => updateSetting('autoSave', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                自动保存间隔 (秒)
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                自动保存的时间间隔
              </p>
            </div>
            <input
              type="number"
              min="5"
              max="300"
              value={getSetting('autoSaveInterval', 30)}
              onChange={(e) => updateSetting('autoSaveInterval', parseInt(e.target.value))}
              className="w-20 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                会话恢复
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                重启时恢复之前的标签页
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('sessionRecovery', true)}
              onChange={(e) => updateSetting('sessionRecovery', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>
        </div>
      </div>
    </div>
  );

  const renderEditorSettings = () => (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
          编辑器设置
        </h3>
        
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                字体大小
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                编辑器字体大小
              </p>
            </div>
            <input
              type="number"
              min="10"
              max="24"
              value={getSetting('fontSize', 14)}
              onChange={(e) => updateSetting('fontSize', parseInt(e.target.value))}
              className="w-20 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                制表符大小
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                制表符的空格数
              </p>
            </div>
            <select
              value={getSetting('tabSize', 2)}
              onChange={(e) => updateSetting('tabSize', parseInt(e.target.value))}
              className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option value={2}>2</option>
              <option value={4}>4</option>
              <option value={8}>8</option>
            </select>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                自动换行
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                长行自动换行显示
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('wordWrap', true)}
              onChange={(e) => updateSetting('wordWrap', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                显示行号
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                在编辑器中显示行号
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('lineNumbers', true)}
              onChange={(e) => updateSetting('lineNumbers', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>
        </div>
      </div>
    </div>
  );

  const renderAppearanceSettings = () => (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
          外观设置
        </h3>
        
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                主题
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                选择应用主题
              </p>
            </div>
            <select
              value={getSetting('theme', 'system')}
              onChange={(e) => updateSetting('theme', e.target.value)}
              className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option value="light">浅色</option>
              <option value="dark">深色</option>
              <option value="system">跟随系统</option>
            </select>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                编辑器主题
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                编辑器代码主题
              </p>
            </div>
            <select
              value={getSetting('editorTheme', 'vs-dark')}
              onChange={(e) => updateSetting('editorTheme', e.target.value)}
              className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option value="vs">Visual Studio</option>
              <option value="vs-dark">Visual Studio Dark</option>
              <option value="hc-black">High Contrast</option>
            </select>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                紧凑模式
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                使用更紧凑的界面布局
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('compactMode', false)}
              onChange={(e) => updateSetting('compactMode', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>
        </div>
      </div>
    </div>
  );

  const renderPerformanceSettings = () => (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
          性能设置
        </h3>
        
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                最大标签页数
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                同时打开的最大标签页数量
              </p>
            </div>
            <input
              type="number"
              min="5"
              max="50"
              value={getSetting('maxTabs', 20)}
              onChange={(e) => updateSetting('maxTabs', parseInt(e.target.value))}
              className="w-20 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                懒加载
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                启用标签页懒加载以提高性能
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('lazyLoading', true)}
              onChange={(e) => updateSetting('lazyLoading', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                性能监控
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                显示性能监控面板
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('performanceMonitor', false)}
              onChange={(e) => updateSetting('performanceMonitor', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>
        </div>
      </div>
    </div>
  );

  const renderAdvancedSettings = () => (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
          高级设置
        </h3>
        
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                开发者模式
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                启用开发者工具和调试功能
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('developerMode', false)}
              onChange={(e) => updateSetting('developerMode', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>

          <div className="flex items-center justify-between">
            <div>
              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                实验性功能
              </label>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                启用实验性功能（可能不稳定）
              </p>
            </div>
            <input
              type="checkbox"
              checked={getSetting('experimentalFeatures', false)}
              onChange={(e) => updateSetting('experimentalFeatures', e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
            />
          </div>

          <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
              onClick={() => {
                if (confirm('确定要重置所有设置吗？此操作无法撤销。')) {
                  // 重置设置逻辑
                  console.log('Reset all settings');
                }
              }}
            >
              重置所有设置
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  const renderSettingsContent = () => {
    switch (activeSection) {
      case 'general': return renderGeneralSettings();
      case 'editor': return renderEditorSettings();
      case 'appearance': return renderAppearanceSettings();
      case 'performance': return renderPerformanceSettings();
      case 'advanced': return renderAdvancedSettings();
      default: return renderGeneralSettings();
    }
  };

  return (
    <div className={`flex-1 flex ${className || ''}`}>
      {/* 设置导航 */}
      <div className="w-64 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <div className="p-4">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
            设置
          </h2>
          <nav className="space-y-1">
            {SETTINGS_SECTIONS.map((section) => (
              <button
                key={section.id}
                className={`w-full flex items-center px-3 py-2 text-sm rounded-lg text-left ${
                  activeSection === section.id
                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
                }`}
                onClick={() => setActiveSection(section.id)}
              >
                <span className="mr-3">{section.icon}</span>
                {section.title}
              </button>
            ))}
          </nav>
        </div>
      </div>

      {/* 设置内容 */}
      <div className="flex-1 overflow-auto">
        <div className="p-6">
          {renderSettingsContent()}
        </div>
      </div>
    </div>
  );
};
